<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <div slot="header">
          <div class="clearfix">
            <!-- 左边区域 -->
            <div class="left">
              <span class="jian">关键字</span>
              <span
                ><el-input
                  v-model="keyword"
                  type="search"
                  placeholder="根据编号搜索"
                  style="margin-left: 10px"

                ></el-input>
              </span>
            </div>

            <!-- 右边区域 -->
            <el-button class="right" type="text">
              <el-button size="small" @click="clearBtn"
                >清除</el-button
              >
              <el-button type="primary" size="small" @click="searchFn"
                >搜索</el-button
              >
            </el-button>
          </div>

          <div class="el-alert">
            <!-- 数据层 -->
            <el-alert type="info" show-icon>
              <span>数据一共 {{ counts }}条</span>
            </el-alert>
          </div>

          <!-- 表格区域 -->
          <el-table :data="tableData" style="width: 100%; margin-top: 10px">
            <el-table-column prop="id" label="编号" width="190">
            </el-table-column>
            <el-table-column
              prop="questionType"
              :formatter="formatter"
              label="题型"
            >
            </el-table-column>
            <el-table-column
              prop="questionIDs
           "
              label="题目编号"
              width="210"
            >
              <template v-slot="scope">
                <div v-for="(obj, index) in scope.row.questionIDs" :key="index">
                  <span>
                    <a
                      @click="showDialogFn(obj.id)"
                      style="color: rgb(0, 153, 255)"
                      v-html="obj.number"
                    ></a>
                  </span>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="addTime" label="录入时间" width="200">
            </el-table-column>
            <el-table-column prop="totalSeconds" label="答题时间(s)">
            </el-table-column>
            <el-table-column prop="accuracyRate" label="正确率(%)">
            </el-table-column>
            <el-table-column prop="userName" label="录入人"> </el-table-column>
            <el-table-column label="操作">
              <template v-slot="scope">
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="deleteRow(scope.row.questionIDs)"
                >
                </el-button>
              </template>
            </el-table-column>
          </el-table>

          <!-- 分页功能 -->
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="query.page"
            :page-sizes="[20, 30, 50, 100]"
            :page-size="query.pagesize"
            layout=" sizes, prev, pager, next, jumper"
            :total="counts"
            background
          >
          </el-pagination>
        </div>

        <!-- 弹框组件 -->
        <el-dialog
          title="题目预览"
          :visible.sync="dialogVisible"
          width="80%"
          :close-on-press-escape="false"
          :close-on-click-modal="false"
        >
          <team-view
            v-if="dialogVisible"
            :userId="parentId"
            @close="dialogVisible = false"
          >
          </team-view>
        </el-dialog>
      </el-card>
    </div>
  </div>
</template>

<script>
import { randoms, removeRandoms } from '@/api/hmmm/questions.js'
// 试题类型
import { questionType } from '@/api/hmmm/constants.js'
// 引入子组件
import teamView from './teamView'

export default {
  name: 'questions-randoms',
  components: {
    teamView
  },
  data () {
    return {
      parentId: '',
      dialogVisible: false, // 弹框状态
      query: {
        page: 1, // 当前页面
        pagesize: 20 // 页面显示的条数
      },
      keyword: '', // 搜索框关键字
      questionIDs: [],
      counts: 0, // 组题列表条数

      tableData: [] // 接收组题列表条数
    }
  },
  created () {
    // 调用组题列表
    this.listFn()
  },

  methods: {
    // 搜索功能
    async searchFn () {
      const res = await randoms({ keyword: this.keyword, ...this.query })
      console.log(res)
      this.tableData = res.data.items
      this.query.page = 1
      this.counts = res.data.counts
    },
    // 点击展示弹框
    showDialogFn (id) {
      console.log(id)
      this.parentId = id
      this.dialogVisible = true
    },

    // 格式化题型
    formatter (row, column, cellValue, index) {
      // console.log(cellValue)// 3 1 2
      // 因为未知的状态后台返回的是字符串,用number转成数字型的即可
      const obj = questionType.find((item) => item.value === Number(cellValue))
      return obj ? obj.label : '未知'
    },
    // 清除按钮
    clearBtn () {
      this.keyword = null
    },
    // 每页显示的条数发生改变时触发
    handleCurrentChange (newPage) {
      this.query.page = newPage
      this.listFn() // 刷新列表
    },
    // 当前页面发生改变时触发
    handleSizeChange (newSize) {
      this.query.pagesize = newSize
      this.listFn() // 刷新列表
    },
    // 组题列表
    async listFn () {
      const res = await randoms(this.query) // 特别注意接口
      // console.log(res)
      this.counts = res.data.counts
      this.tableData = res.data.items
    },
    // 删除按钮
    deleteRow (id) {
      this.$confirm('此操作将永久删除该题组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await removeRandoms(id)
          console.log(id)
          console.log(res)
          this.listFn() // 调用组题列表
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style scoped>
.clearfix {
  padding: 10px 18px;
}
.el-alert {
  margin-top: 3px;
}
.el-alert__icon {
  font-size: 12px;
}

.left {
  display: flex;
  justify-content: space-between;
  justify-items: center;
  float: left;
  padding: 10px 30px;
}
.right {
  margin-top: 10px;
  float: right;
  padding: 3px 0;
}
.jian {
  font-weight: 700;
  font-size: 14px;
  margin-top: 10px;
}
.el-pagination {
  margin-top: 15px;
  text-align: right;
}
</style>
